import { Alert, ContentByFramework, CodeGroup, ReactLogo, RNLogo, ExpoLogo, SvelteLogo, TabbedCodeGroup, TabbedCodeGroupItem, VanillaLogo } from '@/components/forMdx'
import GetAPIKey from "@/components/docs/snippets/GetAPIKey.mdx";

export const metadata = {
  description: "Learn how to sync and persist your data using Jazz Cloud, or run your own sync server."
};

# Sync and storage: Jazz Cloud or self-hosted

For sync and storage, you can either use Jazz Cloud for zero-config magic, or run your own sync server.

## Using Jazz Cloud

<GetAPIKey hideFileName={true} hideCodeGroup={true} />

<ContentByFramework framework={["vanilla"]}>
  Replace the API key in the sync server URL with your API key.
  <CodeGroup className="mb-4">
  ```
  wss://cloud.jazz.tools/?key=YOUR_API_KEY
  ```
  </CodeGroup>
</ContentByFramework>

<ContentByFramework framework={["react", "react-native", "react-native-expo", "svelte"]}>
  Replace the API key in the Jazz provider sync server URL with your API key:
</ContentByFramework>

<TabbedCodeGroup id="api-key" default="react" savedPreferenceKey="framework">
<TabbedCodeGroupItem label="Vanilla" value="vanilla" icon={<VanillaLogo />} preferWrap>
```tsx vanilla.ts
```
</TabbedCodeGroupItem>
<TabbedCodeGroupItem label="React" value="react" icon={<ReactLogo />} preferWrap>
```tsx react-snippet.tsx#Basic
```
</TabbedCodeGroupItem>
<TabbedCodeGroupItem label="React Native" value="react-native" icon={<RNLogo />} preferWrap>
```tsx rn.tsx#Basic
```
</TabbedCodeGroupItem>
<TabbedCodeGroupItem label="Expo" value="react-native-expo" icon={<ExpoLogo />} preferWrap>
```tsx rn.tsx#Expo
```
</TabbedCodeGroupItem>
<TabbedCodeGroupItem label="Svelte" value="svelte" icon={<SvelteLogo />} preferWrap>
  ```svelte svelte.svelte
  ```
</TabbedCodeGroupItem>
</TabbedCodeGroup>

Jazz Cloud will
- sync CoValues in real-time between users and devices
- safely persist CoValues on redundant storage nodes with additional backups
- make use of geographically distributed cache nodes for low latency

### Free public alpha

- Jazz Cloud is free during the public alpha, with no strict usage limits
- We plan to keep a free tier, so you'll always be able to get started with zero setup
- See [Jazz Cloud pricing](/cloud#pricing) for more details

## Self-hosting your sync server

You can run your own sync server using:

<CodeGroup>
```sh
npx jazz-run sync
```
</CodeGroup>

And then use `ws://localhost:4200` as the sync server URL.

You can also run this simple sync server behind a proxy that supports WebSockets, for example to provide TLS.
In this case, provide the WebSocket endpoint your proxy exposes as the sync server URL.

<Alert variant="info" className="mt-4 flex gap-2 items-center">
 Requires at least Node.js v20.
 See our [Troubleshooting Guide](/docs/troubleshooting) for quick fixes.
</Alert>

### Command line options:

- `--host` / `-h` - the host to run the sync server on. Defaults to 127.0.0.1.
- `--port` / `-p` - the port to run the sync server on. Defaults to 4200.
- `--in-memory` - keep CoValues in-memory only and do sync only, no persistence. Persistence is enabled by default.
- `--db` - the path to the file where to store the data (SQLite). Defaults to `sync-db/storage.db`.

### Source code

The implementation of this simple sync server is available open-source [on GitHub](https://github.com/garden-co/jazz/blob/main/packages/jazz-run/src/startSyncServer.ts).
